<script setup lang="ts">
import { pageArticleVo } from '@/api/article'
import useStore from '@/store/index'
import { getQueryVariable } from '@/utils/publicMethods'
import { TagVo } from '@/api/tags/type'
import { ArticleVo, PageArticleReq } from '@/api/article/type'

const store = useStore()
// 标签名称
const selectedTagName = ref('')
// 选中的标签ID
const selectTagId = ref(-1)
// 展示文章列表
const articleList = ref(<ArticleVo[]>[])
// 是否数据加载
const isDataLoading = ref(false)
// 总数
const total = ref()
// 是否展示加载更多
const isNeedLoadMore = ref(true)

/** 查询参数 */
const queryParams = ref(<PageArticleReq>{
  pageNum: 1,
  pageSize: 10,
  type: 'TAG',
  businessId: 0
})

/** 查询展示文章列表 */
async function queryArticleByBid(businessId: number) {
  queryParams.value.businessId = businessId
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  isDataLoading.value = true
  await pageArticleVo(queryParams.value).then(({ data: response }) => {
    articleList.value = response.data.records
    total.value = response.data.total
    const a = Math.ceil(total.value / queryParams.value.pageSize)
    isNeedLoadMore.value = queryParams.value.pageNum + 1 <= a
  })
  isDataLoading.value = false
}

/** 标签跳转 */
function tagClick(tag: TagVo) {
  if (!tag) {
    return
  }
  selectedTagName.value = tag.name
  selectTagId.value = tag.id
  queryArticleByBid(tag.id)
}

/** 加载更多 */
async function loadMore() {
  const a = Math.ceil(total.value / queryParams.value.pageSize)
  if (queryParams.value.pageNum + 1 >= a) {
    isNeedLoadMore.value = false
  }
  if (queryParams.value.pageNum + 1 <= a) {
    queryParams.value.pageNum = 1 + queryParams.value.pageNum
    isDataLoading.value = true
    await pageArticleVo(queryParams.value).then(({ data: response }) => {
      articleList.value = [...articleList.value, ...response.data.records]
    })
    isDataLoading.value = false
  }
}

// 初始网页动作
onMounted(() => {
  // 获取网页地址携带参数
  const id = getQueryVariable('id')
  if (id) {
    queryArticleByBid(Number.parseInt(id))
  }
})
</script>

<template>
  <CommonContainerTemplate>
    <template #default>
      <h1 class="flex-center">
        <svg-icon class="link" icon-class="tags"></svg-icon>
        标签 ({{ store.tags.length }})
      </h1>
      <!--标签列表-->
      <el-card class="tags-card" shadow="hover">
        <el-space size="large" wrap>
          <div v-for="tag in store.tags" :key="tag.id">
            <el-button
              :style="[selectTagId == tag.id ? 'color: #4aabf3;background-color: #b7dbfa;' : '']"
              text
              bg
              size="large"
              @click="tagClick(tag)"
            >
              <svg-icon icon-class="label-sign"></svg-icon> {{ tag.name }}
              <div class="tags">{{ tag.articleCount }}</div>
            </el-button>
          </div>
        </el-space>
      </el-card>
      <!--文章列表-->
      <div v-show="articleList.length > 0">
        <h1 class="flex-center">
          <svg-icon class="link" icon-class="tags"></svg-icon>
          {{ selectedTagName }}
        </h1>
        <el-space direction="vertical" fill size="large" style="display: flex">
          <ArticleCardList
            :loading="isDataLoading"
            :data-list="articleList"
            :is-need-load-more="isNeedLoadMore"
            @load-more="loadMore"
          />
        </el-space>
      </div>
    </template>
  </CommonContainerTemplate>
</template>

<!--公共部分-->
<style scoped>
.tags-card {
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
}
.link:hover {
  cursor: pointer;
}
</style>
